<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>articleDetails</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<style type="text/css">
			body {
				background-color: #EEEEEE;
			}
			.articleDetails-wrap {
				width: 85%;
				height: auto;
				margin: auto;
			}
			
			.articleDetails-left,
			.articleDetails-right {
				background-color: white;
				padding: 40px 50px 70px 50px;
			}
			
			.articleDetails-left .title {
				font-size: 30px;
				font-weight: 500;
				text-align: center;
			}
			
			.articleDetails-left ul {
				margin-top: 50px;
				overflow: hidden;
			}
			
			.articleDetails-left ul li {
				list-style: none;
				float: left;
				color: rgb(145, 158, 189);
				margin-right: 10px;
			}
			
			.articleDetails-left ul .interval {
				margin-left: 40px;
			}
			
			.articleDetails-wrap .articleDetails-left-con {
				clear: both;
				font-size: 16px;
				min-height:300px;
				margin-top: 20px;
				margin-bottom:100px;
				line-height: 2em;
			}
			.def-foot{
				background: #000;
				height: 80px;
				margin-top: 30px;
				margin-bottom:0;
				padding-top: 10px;
			}
			.def-foot .text{
				width: 85%;
				margin: auto;
				color: #fff;
				font-size: 16px;
			}
			.def-foot .text p{
				margin-top: 6px;
			}
			.btnpricce{
			    width: 10%;
			    color:#000;
			    display: block;
			    text-align: center;
			    border-radius: 4px;
			    /* border: 2px solid rgb(73, 132, 236); */
			}
		</style>
	</head>
	<body>
	<!-- 导航部分Start -->
	<%@ include file="sysmenu.jsp"%>
	<!-- 导航部分End -->	
	<input id="inparitcleid" value="${article.infoid }" type="text" style="display:none">
	<div class="articleDetails-wrap">
		<div class="layui-row layui-col-space20">
			  <div class="layui-col-sm11">
			      <div class="articleDetails-left">
			      	<span class="title">${article.title }</span>
			      	<ul>
			      		<li>阅读量：</li>
			      		<li>${article.readnum }</li>
			      		<li class="interval">点赞量：</li>
			      		<li>${article.praisenum }</li>
			      		<c:if test="${article.source!='' && article.source!=null}">
			      			<li class="interval">来源:</li>
		                	<li>${article.schoolName }</li>
		                </c:if>
			      	</ul>
			      	<div class="articleDetails-left-con">${article.infocontent }</div>
			      	<a id="btnaddprice" href="javascript:" class="btnpricce">
	                    <i class="layui-icon layui-icon-praise" style="font-size:35px; display: block;"></i>
	                    <span>点赞</span>
	              	</a>
			      </div>
			  </div>
		</div>
	</div>
	
	<div class="def-foot">
		<div class="text">
			<p>地址：云南省昆明市盘龙区青云街道办事处世博生态城低碳中心B栋301d号</p>
			<p>备案号：滇ICP备19003583号 </p>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="layui/layui.all.js" ></script>
	<script type="text/javascript">
	$(function(){
		$("#btnaddprice").click(function(e){
			var infoid=$("#inparitcleid").val();
			$.ajax({
				type: "get",
				url: "addpraisenum.action?infoid="+infoid,
				datatype: "json",
				success: function(data) {
					if(data.code==10001){
						txtshow(e,data.msg);
					}else{
						txtshow(e,data.msg);
					}
				},
				error: function() {
					txtshow(e,"点赞失败");
				}
			}); 
		});
	});
	
	function txtshow(e,a) {
		var a_idx = 0,
			b_idx = 0;
		c_idx = 0;

		var a = new Array(a),
			b = new Array("#09ebfc", "#ff6651", "#ffb351", "#51ff65", "#5197ff", "#a551ff", "#ff51f7", "#ff518e", "#ff5163", "#efff51");
		var $i = $("<span class='layui-unselect'><span/>").text(a[a_idx]);
		a_idx = (a_idx + 1) % a.length;
		b_idx = (b_idx + 1) % b.length;
		var x = e.pageX,
			y = e.pageY;
		$i.css({
			"z-index": 999999,
			"top": y - 20,
			"left": x,
			"position": "absolute",
			"font-weight": "bold",
			"font-size": "18px",
			"color": b[b_idx]
		});
		$("body").append($i);
		$i.animate({
			"top": y - 150,
			"opacity": 0
		}, 1500, "linear", function() {
			$i.remove();
		});

		var _hmt = _hmt || [];
	}
	</script>
	</body>
</html>
